<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>异步请求 - 响应对象</title>
</head>
<body>
    <h1>服务器响应List集合</h1>
    <h3>请查看浏览器控制台</h3>

    <p/>
    <button id="btn" type="button" onclick="async()">发送异步请求</button>

    <script>
        function async() {
            // 第一：实例化 XMLHTTPRequest 对象
            var req = new XMLHttpRequest();

            // 第二：初始化HTTP请求参数 - 调用 open 方法
            req.open("get","list.do",true) ;

            // 第三：编写服务器端程序 - Servlet

            // 第四：发送请求 - 调用 send 方法
            req.send(null) ;

            // 第五：设置回调函数 - 绑定 onreadystatechange 事件- 获取服务器响应的结果
            req.onreadystatechange = function() {
                // readyState=4 表示完成请求响应这个过程
                // status=200 表示正常响应
                if (req.readyState==4 && req.status==200) {
                    // DOM 操作 - 获取服务器响应的数据 - 回显在指定的节点中
                    var json = req.responseText ;

                    // 把 JSON 字符串 转换为 JavaScript数组
                    var arr = eval("(" + json + ")") ;

                    // 循环遍历，控制台输出 - 在实际开发中，需要做DOM操作，在页面中显示数据
                    for(var i=0;i<arr.length;i++) {
                        console.log(arr[i].name,arr[i].age)
                    }

                }
            }

        }

    </script>
</body>
</html>